var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    // bootstrap-loader是一个用来加载Bootstrap的Webpack加载器。这个加载器使用Sass处理CSS样式，对于Bootstrap 3&4都能支持。
    // bootstrap-loader及其相关依赖包:
    // bootstrap-loader bootstrap-sass css-loader node-sass resolve-url-loader sass-loader style-loader url-loader
    'bootstrap-loader',
    './index.js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'babel' ],
        exclude: /node_modules/,
        include: __dirname
      },
      //下面是: 配置样式和字体的加载器
      // 在样式文件的加载器列表中添加postcss
      {
        test: /\.css$/,
        loaders: [
          'style',
          // postcss-loader不能直接和CSS Module公用。
          // 因此，如果你使用了CSS Mod-ule，应该添加importLoaders参数来使它们正常工作。
          // importLoaders的值是css-loader后面的加载器的个数。
          // localIdentName参数来指定CSS Module中类选择器的命名格式
          'css?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]',
          // PostCSS是一个使用JS插件转换样式的工具。这个工具拥有丰富的功能，包括：对CSS代码进行语法检查、支持变量和mixins、编译未来的CSS语法等等。PostCSS被很多巨头所使用，包括Wikipedia、Twitter、Alibaba和JetBrains等。
          // Autoprefixer是最流行的PostCSS插件之一，它可以解析CSS，并给CSS规则添加前缀
          'postcss'
        ]
      },
      {
        test: /\.scss$/,
        loaders: [
          'style',
          'css?modules&importLoaders=2&localIdentName=[name]__[local]__[hash:base64:5]',
          'postcss',
          'sass'
        ]
      },
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url?limit=10000"
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        loader: 'file'
      }
    ]
  },
  // 在Webpack配置文件中增加postcss选项，并在该选项中添加插件列表。
  // 因为本例只使用了Autoprefixer这一个插件，故列表中只有一个 autoprefixer。
  // Autoprefixer使用了Browserslist，所以你可以使用last 2 versions或＞5%这样的查询参数来指定项目将要运行的浏览器对象。
  // Browserslist是一个可以通过给定字符串选择浏览器版本的工具。
  postcss: [autoprefixer({ browsers: ['last 2 versions'] })]
};
